<!--右侧边栏-->
<div class="col-sm-3 col-12 postSide" id="side_most_recommend">
    <!--搜索框-->
    <!--            <div class="search-bar row">-->
    <!--                <div class="col-8">-->
    <!--                    <input type="text" class="form-control" id="keyword" placeholder="请输入关键字"/>-->
    <!--                </div>-->
    <!--                <div class="col-4" style="text-align:right;">-->
    <!--                    <button type="button" class="btn btn-primary">搜索</button>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--最新文章-->
    <div class="side article-panel">
        <div class="col-12 tip"><i class="fa fa-coffee" aria-hidden="true"
                                   style="color: orange;padding-right: 10px"></i>热门文章
        </div>
        <div>
            <!--axios动态填充-->
            <ul>
                <li v-for="(item,idx) in mostItems">
                    <a v-bind:href="'/article/'+item.id">{[idx+1]}.{[item.headline.slice(0,25)]}...</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="fixedmenu" class="side article-panel" style="margin-top: 35px">
        <div class="col-12 tip"><i class="fa fa-coffee" aria-hidden="true"
                                   style="color: orange;padding-right: 10px"></i>文章推荐
        </div>
        <div>
            <!--ajax动态填充-->
            <!--axios动态填充-->
            <ul>
                <li v-for="(item,idx) in recommendItems">
                    <a v-bind:href="'/article/'+item.id">{[idx+1]}.{[item.headline.slice(0,25)]}...</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="../../static/plugins/axios.min.js"></script>
<script src="../../static/plugins/vue2.js"></script>
<script>
    var app = new Vue({
        el: '#side_most_recommend',
        data: {mostItems: [], recommendItems: []},
        delimiters: ['{[', ']}'],
        created: function () {
            axios({
                method: 'get',
                url: '/api/most_recommend',
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then((res) => {
                // console.log(res.data)
                this.mostItems = res.data[0];
                this.recommendItems = res.data[1];
                // console.log(this.mostItems);
            }).catch(err => {
                console.log('动态渲染失败：', err);
            })
        }
    })
    <!--将右侧边栏的内容一直固定在屏幕上，无论怎么滚动滚轮-->
    window.document.addEventListener('DOMContentLoaded',
        function () {
            var fixDiv = document.getElementById("fixedmenu");
            var Y = fixDiv;
            var H = 0;
            // 获取该部件距离页面顶部的距离
            while (Y) {
                H += Y.offsetTop;
                Y = Y.offsetParent;
            }
            // 事件监听滚轮的移动距离
            window.addEventListener('scroll', function () {
                if (window.scrollY > (H + 200)) {
                    fixDiv.style = "position:fixed;top:0;margin-top:0;width:331px";
                } else {
                    fixDiv.style = "";
                }
            })
        }
    )
</script>


